<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="copyright" content="Tencent"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>设置密码</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/public.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/s01.css" />
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/companycard/s02.css" />
</head>
<body>
    <div class="title">设置密码后，可通过手机号码加密码登录酷客账号</div>
    <div class="phone">
        手机号<span>${sysuser.account}</span>
    </div>
    <div class="m_xchunk">
        <div class="line">
            <span>旧密码</span>
            <div class="right">
                <input type="password" id="old_pwd" placeholder="请输入旧密码" class="text">
            </div>
        </div>
        <div class="line">
            <span>新密码</span>
            <div class="right">
                <input type="password" id="new_pwd_one" placeholder="请输入新密码" class="text">
            </div>
        </div>
        <div class="line">
            <span>确认密码</span>
            <div class="right">
                <input type="password" id="new_pwd_two" placeholder="请再次输入新密码" class="text">
            </div>
        </div>
    </div>
    <p class="hint">*密码必须至少8字符，而且同时包含字母和数字</p>
     <p class="hint red_hint" id="error_msg"></p>
     <div class="l-wrapper" id="stateCircle" style="display: none;">
		<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		      <g id="circle" class="g-circles g-circles--v1">
		          <circle id="12" transform="translate(35, 16.698730) rotate(-30) translate(-35, -16.698730) " cx="35" cy="16.6987298" r="10"></circle>
		          <circle id="11" transform="translate(16.698730, 35) rotate(-60) translate(-16.698730, -35) " cx="16.6987298" cy="35" r="10"></circle>
		          <circle id="10" transform="translate(10, 60) rotate(-90) translate(-10, -60) " cx="10" cy="60" r="10"></circle>
		          <circle id="9" transform="translate(16.698730, 85) rotate(-120) translate(-16.698730, -85) " cx="16.6987298" cy="85" r="10"></circle>
		          <circle id="8" transform="translate(35, 103.301270) rotate(-150) translate(-35, -103.301270) " cx="35" cy="103.30127" r="10"></circle>
		          <circle id="7" cx="60" cy="110" r="10"></circle>
		          <circle id="6" transform="translate(85, 103.301270) rotate(-30) translate(-85, -103.301270) " cx="85" cy="103.30127" r="10"></circle>
		          <circle id="5" transform="translate(103.301270, 85) rotate(-60) translate(-103.301270, -85) " cx="103.30127" cy="85" r="10"></circle>
		          <circle id="4" transform="translate(110, 60) rotate(-90) translate(-110, -60) " cx="110" cy="60" r="10"></circle>
		          <circle id="3" transform="translate(103.301270, 35) rotate(-120) translate(-103.301270, -35) " cx="103.30127" cy="35" r="10"></circle>
		          <circle id="2" transform="translate(85, 16.698730) rotate(-150) translate(-85, -16.698730) " cx="85" cy="16.6987298" r="10"></circle>
		          <circle id="1" cx="60" cy="10" r="10"></circle>
		      </g>
	
		      <use xlink:href="#circle" class="use"/>
		</svg>
	</div>
    <div class="m_xbutton">
        <a href="javascript:;" class="s_zc_button" id="finish">完 成</a>
    </div>
	<script type="text/javascript" src="<%=path%>/js/companycard/jquery-1.8.1.min.js"></script>
	<script type="text/javascript">
	$("#stateCircle").css({'line-height':$(window).height()+"px"});
	function loading(){
		$("#stateCircle").css({"display":"block"});
	}
        $('#finish').click(function () {
        	var old_password ="";  
			var new_password =""; 
			var new_two_password="";
			var promptMsg="";
			var flag=true;
			if(flag){
				if($('#old_pwd').val()!=null&&$('#old_pwd').val().trim()!=""){
					old_password=$('#old_pwd').val().trim();
				}else{
					promptMsg="旧密码不能为空！";
					flag=false;
				}	
			}
			if(flag){
				if($('#new_pwd_one').val()!=null&&$('#new_pwd_one').val().trim()!=""){
					new_password=$('#new_pwd_one').val().trim();
				}else{
					promptMsg="新密码不能为空！";
					flag=false;
				}	
			}
			if(flag){
				if($('#new_pwd_two').val()!=null&&$('#new_pwd_two').val().trim()!=""){
					new_two_password=$('#new_pwd_two').val().trim();
				}else{
					promptMsg="确认密码不能为空！";
					flag=false;
				}
			}
			if(flag){
				if(new_two_password!=new_password){
					promptMsg="确认密码不一致，请重新输入！";
					flag=false;
				}
			}
			if(flag){
				if(new_password.length<6){
					promptMsg="密码请勿少于6位！";
					flag=false;
				}
			}
			if(flag){
				var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
				if(!reg.test(new_password)){
					promptMsg="密码需含有数字与字母！";
					flag=false;
				}
			}
			if(flag){
				$.ajax({
	         		  url: "<%=path%>/mobile/updatePassword",
	         		  type: "post",		      	  
	         		  async: true,
	         		  data:{"old_password":old_password,"new_password":new_password},
	         		  dataType: "json",
	         		  timeout: 1000,
	         		  error: function(){},
	         		  beforeSend: function(){loading();},
	         		  success: function(data){ 
	         			 $("#stateCircle").css({"display":"none"});
	         			  //console.log(data);
		         		  if (data.error_code=="0") {
		         			 alert('修改成功，请重新登录');
		                     window.location.href = "<%=path%>/mobile/toLogin";  			 
		         		  }else{		         			 
		         			$('#error_msg').text(data.error_message);
		         		  }
	         		 	}
	         	});
			}else{
				$('#error_msg').text(promptMsg);
			}
        });
	</script>
</body>
</html>